<template>
  <div style="padding: 10px 0">
    <template v-for="(d, i) in data" :key="i">
      <el-divider v-if="i > 0" border-style="dashed" style="margin: 0" />
      <div style="padding: 8px 0; display: flex">
        <ele-ellipsis class="demo-tab-item-title">{{ d.title }}</ele-ellipsis>
        <ele-text type="placeholder">{{ d.date }}</ele-text>
      </div>
    </template>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const props = defineProps({
    type: {
      type: Number,
      required: true
    }
  });

  const data = ref(
    (() => {
      return Array.from({ length: 4 - props.type }).map((_, i) => {
        return {
          title: `EleAdmin新版本发布, 欢迎体验 ${props.type + 1}-${i + 1}`,
          date: '2023-05-20'
        };
      });
    })()
  );
</script>

<style lang="scss" scoped>
  .demo-tab-item-title {
    flex: 1;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: var(--el-color-primary);
    }
  }
</style>
